<template>
    <div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in newsListArr" :key="item._id">
                <router-link :to="'/home/newsinfo/'+item.id" >
                    <img class="mui-media-object mui-pull-left" :src="item.img_url">
                    <div class="mui-media-body">
                        <h1>{{item.title}}</h1>
                        <p class="mui-ellipsis">
                            <span>发表时间：{{item.add_time | dataFormat}}</span>
                            <span>点击:{{item.click}}</span>
                        </p>
                    </div>
                </router-link>
            </li>

        </ul>
    </div>
</template>

<script>
    import { Toast } from "mint-ui";
export default {
    data(){
        return{
            newsListArr:[],
        }
    },
    created(){
        this.getNewList();
    },
    methods:{
    getNewList(){
        this.$http.get('http://127.0.0.1:3001/get').then((result)=>{
            if(result.body.code ==='0'){
                this.newsListArr = result.body.news;
                console.log(result.body.news);
            }else {
                Toast('网络抽风了');
            }
        }).catch(function (err) {
            console.log(err);
        });
    }
}
}
</script>

<style scoped lang="less">
    .mui-table-view {
        li {
            h1 {
                font-size: 14px;
            }

            .mui-media-body {
                font-size: 12px;
                span:nth-child(1){
                    float: left;
                }
                span:last-child{
                    float: right;
                }
            }
        }
    }
</style>